{% extends "base.html" %}
{% block content %}

<script>
    var subscribed_boolean = {{ postjob.views.userviewcompany.subscribed_boolean }};
</script>

<style>
    .card {

        margin-bottom:5px;
    }

    #HoverCard:hover {
        background-color: #ff6d00;
        transition: all 0.5s ease;
    }

</style>

    <div class="container" style="position: relative;text-align: center;color: white;">
        <img src="{{company.banner.url}}" alt="Banner" style="width:100%;">
        <br>
        <div class="container" style="background-image: linear-gradient(to bottom left,rgba(220,220,220,1), rgba(220,220,220,1)); border-style:none;  position:relative; z-index:200; height:110px; top:-70px;">
            <div class="row">

                <div>
                    <img src="{{company.image.url}}" style="height:100px; position:relative; top:5px; left:10px; border: solid grey 10px; border-radius: 10px;">
                </div>
                

                <div style="position: relative;bottom: 1px;left: 30px;"><h1>{{company.name}}</h1> 
                    <div class="row" style="position:relative;bottom: 1px;left: 18px;">{{company.address}}</div>
                </div>

                {% if subscribed_boolean == False %}
                <div style="position: absolute;bottom: 8px;right: 30px;"><a href="/subscribe/{{company.id}}" style="margin-top:40px; float:right" class="btn btn-primary" , name='subscribe'>
                                        Subscribe
                                    </a>
                </div>  
                {% elif subscribed_boolean == True %}
                <div style="position: absolute;bottom: 8px;right: 30px;"><a href="/unsubscribe/{{company.id}}" style="margin-top:40px; float:right" class="btn btn-primary" , name='subscribe'>
                                        Unsubscribe
                                    </a>
                </div>  
                {% endif %} 
            </div>                  
            </div>
            
        </div>
        
    </div>
    

    <div class="container" style="position:relative; top:-60px;">
        <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="about-tab" data-toggle="tab" href="#about" role="tab" aria-controls="about" aria-selected="true">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="feed-tab" data-toggle="tab" href="#jobs" role="tab" aria-controls="jobs" aria-selected="false">Jobs</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="jobs-tab" data-toggle="tab" href="#feed" role="tab" aria-controls="feed" aria-selected="false">Events</a>
            </li>
        </ul>
        <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade show active" id="feed" role="tabpanel" aria-labelledby="nav-feed-tab">
                {% for event in events %}
                <div class="card" id="HoverCard">
                    <div class="card-body">
                        <h5 class="card-title">{{event.title}} - {{event.deadline}}</h5>
                        <p class="card-text">{{event.description}}</p>
                        <small class="text-muted">Posted on {{event.posted}}</small>
                    </div>
                </div>
                {% endfor %}
            </div>
            <div class="tab-pane fade" id="jobs" role="tabpanel" aria-labelledby="nav-jobs-tab">
                {%for job in jobs%}
                <div class="card" id="HoverCard">
                    <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    {{job.title}}

                                    <h5 class="card-title"><input class="form-control here" type="hidden" name="name" value="{{job.title}}"></h5>
                                    {{job.jobtype}}

                                    <p class="card-text"><input class="form-control here" type="hidden" name="type" value="{{job.jobtype}}"></p>
                                    {{job.description}}

                                    <p class="card-text"><input class="form-control here" type="hidden" name="description" value="{{job.description}}"></p>
                                </div>

                                <div class="col ml auto">
                                    <a href="{% url 'applyjob' job.id%}" style="margin-top:40px; float:right" class="btn btn-primary" , name='apply'>
                                        Apply
                                    </a>
                                </div>
                            </div>
                    </div>
                </div>
                {%endfor%}
            </div>
            <div class="tab-pane fade" id="about" role="tabpanel" aria-labelledby="nav-about-tab">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">About COMPANY</h5>
                        <p class="card-text">
                            {{company.company_description}}
						</p>

                    </div>
                </div>
            </div>
        </div>
    </div>
    

{% endblock %}